<template>
    <div class='w100' style="height: 300px;" id="main-chart2">

    </div>
</template>

<script>
export default {
    name: '',
    components: {},
    data() {
        return {
            option: {}
        }
    },
    created() { },
    mounted() {



        var chartDom = document.getElementById('main-chart2');
        var myChart = this.$echarts.init(chartDom);

        this.option = {
            title: {
                text: '',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            // legend: {
            //     orient: 'vertical',
            //     left: 'left'
            // },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        myChart.setOption(this.option);

    },
    methods: {}
}
</script>
<style scoped lang='scss'>
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

#main-chart2 {
    box-shadow: 0 0 10px 0 #ccc;
}
</style>
